import { ref } from 'vue'
import { findTopCategory } from '@/api/category'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'

// 第二种精细化处理方式
// 1.监听到路由变化   ---onBeforeRouteUpdate
// 2.获取接口数据   ---重新调用方法
export function useCategory () {
  const categoryList = ref({})
  // 在setup中使用router参数
  const route = useRoute()
  // 获取分类数据
  async function findTop (id) {
    const res = await findTopCategory(id)
    categoryList.value = res.result
  }
  findTop(route.params.id)

  onBeforeRouteUpdate((to) => {
    console.log('路由发生了变化')
    // 使用to参数的属性进行获取路由跳转参数
    const newID = to.params.id
    findTop(newID)
  })

  return {
    categoryList
  }
}
